import { CSSProperties, ReactNode } from 'react';
import { Col, Row, Statistic } from 'antd';
import { CodepenOutlined,MenuFoldOutlined,AppstoreAddOutlined,ClusterOutlined,ProfileOutlined   } from '@ant-design/icons';
import { valueType } from 'antd/lib/statistic/utils';
import CommonIconFont from '../CommonIconFont';

import styles from './index.less';


const NumberCard = ({
    data,
    style,
    onClick,
}: {
    data: AircasHome.GetroupStatisticsByKnowledgeTypeResponse;
    style?: CSSProperties;
    onClick?: () => void;
}) => {

    enum colors{
        "#1f3a93"=1,
        "#9a59b5",
        "#1a9991",
        "#426cb6",
        "#f06c42",
        "#1f3a93",
        "#9a59b5",
        "#1a9991",
        "#426cb6",
        "#f06c42"
    }

    return (
        <div className={styles.card} style={{ ...style }}>
            <Row gutter={[0, 0]} className={styles.wrapper}>
                <Col
                    span={8}
                    className={styles.left}
                    style={{ backgroundColor: colors[data.typeId] ?? 'unset' }}
                >
                    {data.typeId == "1" && <CodepenOutlined className={styles.icon}/>}
                    {data.typeId == "2" && <MenuFoldOutlined  className={styles.icon}/>}
                    {data.typeId == "3" && <AppstoreAddOutlined  className={styles.icon}/>}
                    {data.typeId == "4" && <ClusterOutlined  className={styles.icon}/>}
                    {data.typeId == "5" && <ProfileOutlined  className={styles.icon}/>}
                    {data.typeId == "6" && <ClusterOutlined className={styles.icon}/>}
                    {Number(data.typeId) > 6  && <CodepenOutlined className={styles.icon}/>}
                </Col>
                <Col span={16} className={styles.right}>
                    <Statistic
                        title={data.typeName}
                        value={data.count}
                        valueStyle={{
                            fontSize: 18,
                            fontFamily:"impact",
                            color: colors[data.typeId] ?? 'unset',
                        }}
                    />
                </Col>
            </Row>
        </div>
    );
};

const NumberCardList = ({ data }: { data: AircasHome.GetroupStatisticsByKnowledgeTypeResponse[] }) => {
    return (
        <div style={{display:"flex"}}>
            {data.map((item: AircasHome.GetroupStatisticsByKnowledgeTypeResponse, index: number) => {
                return <NumberCard key={index} data={item} />;
            })}
        </div>
    );
};

export default NumberCard;
export { NumberCardList };
